<template>
  <div class="serviceCharge">
    <div class="serviceCharge-title">服务费管理</div>
    <div class="serviceCharge-content">
      <div class="title">
        <span>账期:
          <a-select v-model="form.accountPeriod"
                    @change="onSerch()"
                    placeholder="请选择账期"
                    style="width:240px"
                    allowClear>
            <a-select-option v-for="item in timeArr"
                             :value="item"
                             :key="item.id"
                             @change="onSerch()">
              {{item}}
            </a-select-option>
          </a-select>
        </span>
        <span v-if="currentTenant.typeName === '4S店'">服务提供方：
          <a-select v-model="form.tenantId"
                    @change="onSerch()"
                    placeholder="请选服务提供方"
                    style="width:240px"
                    allowClear>
            <a-select-option v-for="item in cardTypeArr"
                             :value="item.code"
                             :key="item.id">
              {{item.name}}
            </a-select-option>
          </a-select>
        </span>
        <div class="tit-button">
          <a-button type="link"
                    style="margin-right:10px"
                    @click="concle">
            重置
          </a-button>
          <a-button type="danger"
                    @click="onSerch">
            查询
          </a-button>
        </div>
      </div>
      <div class="content">
        <a-table :columns="columns"
                 :data-source="data"
                 :pagination="false">
          <span slot="action"
                slot-scope="text, record"
                class="content-action">
            <div @click="getBill(record)"><img src="../../../assets/image/sellerHub/mx.png"
                   alt=""> 账单明细</div>
            <div @click="getinvoice(record)"><img src="../../../assets/image/sellerHub/mx.png"
                   alt=""> 发票明细</div>
          </span>
        </a-table>
      </div>
    </div>
    <div class="content-foot">

      <pagination @pageChange="pageChange"
                  :total="total"
                  :current="form.pageNo"></pagination>
      <span class="paginationBefore">共 <i>{{total}}</i> 条</span>
    </div>

    <!-- 账单明细组件 -->
    <BillDetall ref="BillPackage"
                :visible="disDetails"
                @billOK="billOK"
                @cancel="disDetails = false">
    </BillDetall>

    <!-- 发票明细 -->
    <!-- 账单明细组件 -->
    <invoiceDetall ref="invoicePackage"
                   :visible="invoice"
                   @billOK="invoice = false"
                   @cancel="invoice = false">
    </invoiceDetall>
  </div>
</template>   
<script>
import pagination from '@/components/common/pagination.vue'
import BillDetall from "./components/BillDetall";
import invoiceDetall from "./components/invoiceDetall";
const columns = [
  {
    title: '账期',
    dataIndex: 'accountPeriod',
    key: 'accountPeriod',
  },
  {
    title: '订单数',
    dataIndex: 'subOrderNum',
    key: 'subOrderNum',
    width: 80,
  },
  {
    title: '服务费(元)',
    dataIndex: 'servicePrice',
    key: 'servicePrice',
    ellipsis: true,
  },

  {
    title: '操作',
    key: 'action',
    width: 140,
    scopedSlots: { customRender: 'action' },
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default {
  components: {
    pagination,
    BillDetall,
    invoiceDetall,

  },
  data () {
    return {
      tenantId: '',
      columns,
      data,
      total: 1,
      current: 1,
      disDetails: false,
      invoice: false,
      form: {
        "accountPeriod": undefined,
        "endDate": "",
        "id": "",
        "pageNo": 1,
        "pageSize": 10,
        "searchName": "",
        "startDate": "",
        "tenantId": undefined
      },
      cardTypeArr: [],
      timeArr: []
    }
  },
  created () {
    this.getList()
    this.get4sList()
    this.getTimeList()
  },
  methods: {
    getList () {
      this.$store.dispatch('request', this.$api.sellerCenter.serviceFeePage(this.form)).then(res => {
        console.log(res);
        this.data = res.result.records
        this.total = res.result.total
      })
      // serviceFeePage
    },
    //获取账期列表
    getTimeList () {
      this.$store.dispatch('request', this.$api.sellerCenter.serviceFeeTime(this.form)).then(res => {
        this.timeArr = res.result
      })
    },
    //获取4s列表
    get4sList () {
      this.$store.dispatch('request', this.$api.sellerCenter.tenantsList(this.form)).then(res => {
        console.log(res);
        this.cardTypeArr = res.result
      })
    },
    //点击进入账单详情
    getBill (row) {
      console.log(123123,);
      this.disDetails = true
      this.$refs.BillPackage.getList(row);
    },
    getinvoice (row) {
      this.invoice = true
      this.$refs.invoicePackage.getList(row);
    },
    onSerch () {
      this.getList()
    },

    pageChange (current) {
      this.form.pageSize = current;
    },
    concle () {
      this.form.accountPeriod = undefined
      this.form.tenantId = undefined
      this.getList()
    },
    billOK () { }
  },
  computed: {
    tokenValue () {
      return this.$store.state.user.tokenValue
    },
    currentTenant () {
      return this.$store.state.user.currentTenant
    },
  },
  watch: {
    tokenValue (newVal) {
      this.isShow = !newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.serviceCharge {
  margin-right: 16px;
  height: 100%;
  .serviceCharge-title {
    height: 54px;
    width: 100%;
    background: #fff;
    padding-left: 24px;
    line-height: 54px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: @newColorGreyFontM;
    margin-bottom: 16px;
  }
  .serviceCharge-content {
    background: #fff;
    margin-left: 16px;
    padding: 24px;
    height: calc(100% - 140px);
    .title {
      height: 80px;
      border-radius: 2px;
      box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.08);
      padding-top: 24px;
      padding-left: 28px;
      margin-bottom: 16px;
      padding-right: 24px;
      span {
        margin-right: 58px;
      }
      .tit-button {
        float: right;
      }
    }
    .content {
      .content-action {
        > div {
          color: @newColorGreyFontM;
          font-size: 14px;
          cursor: pointer;
          img {
            width: 16px;
            height: 16px;
            vertical-align: text-top;
            margin-right: 6px;
          }
        }
      }
    }
  }
  .content-foot {
    height: 72px;
    background: #fff;
    box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
    padding: 24px;
    margin-left: 16px;
    .pagination-inline {
      float: right;
    }
  }
}
.paginationBefore {
  float: right;
  font-size: 12px;
  line-height: 24px;
  margin-right: 8px;
  i {
    color: @activeRed;
    font-style: normal;
  }
}
/deep/ .ant-table-thead {
  font-size: 14px;
  background: #f9f9f9;
  color: @newColorGreyFontM;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  > tr > th {
    padding: 14px 16px;
    border-bottom: 1px solid @newBorder;
  }
}
/deep/ .ant-table-tbody {
  color: @newColorGreyFontM;
  font-size: 14px;
  > tr > td {
    padding: 34px 16px;
    border-bottom: 1px solid @newBorder;
  }
}
/deep/ .ant-btn {
  padding: 0 9px;
  font-size: 14px;
}
/deep/ .ant-btn-link {
  color: @newColorGreyFontM;
}
@media screen and (max-width: 23000px) {
  .title {
    font-size: 12px !important;
  }
  .tit-button {
    /deep/ .ant-btn {
      font-size: 12px;
    }
  }
  /deep/ .ant-table-thead {
    font-size: 12px;
  }
  /deep/ .ant-table-tbody {
    font-size: 12px;
  }
  .serviceCharge .serviceCharge-content .content .content-action > div {
    font-size: 12px;
  }
}
</style>